<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>		
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../elmentui/elmentui.css">
		<!-- 引入组件库 -->
		<script src="../../elmentui/elmentui.js"></script>
		<!-- 引入axios网络传输库 -->
		<script src="../../elmentui/axios.min.js"></script>
		<!--解决axios跨域无法传递form表单数据到后台实体类的问题-->
		<script src="../../elmentui/qs.min.js"></script>
		<style>
			.el-input__inner{
				width: 500px;

			}
		</style>
	</head>
	<body>		
	<div id="app">
		 <!-- 查询条件布局 -->
		<el-form :inline="true" :model="userInfo" class="demo-form-inline" style=" text-align: center;">
			  <el-row>
				    <el-col :span="10" >
						  <el-form-item label="姓名">
								<el-input  v-model="userInfo.username" placeholder="姓名"></el-input>
						  </el-form-item>
					</el-col>	  
					<el-col :span="10" >	  
						  <el-form-item label="年龄">
							<el-input v-model="userInfo.userage" placeholder="年龄"></el-input>					
						  </el-form-item>
					</el-col>
		  </el-row>
		  <el-row>
			   <el-col :span="10">
							  <el-form-item label="地址">
									<el-input v-model="userInfo.useraddress" placeholder="地址"></el-input>
							  </el-form-item>
				</el-col>			  
				<el-col :span="10">			  
							  <el-form-item label="邮箱">
								<el-input v-model="userInfo.usereamail" placeholder="邮箱"></el-input>					
							  </el-form-item>
				</el-col>
		  </el-row>
		  	  
	  <el-row>    
	    <el-button type="primary"  @click="onSelect" style="margin-right: 30px;">查询</el-button>
	    <el-button type="success"  @click="onAdd" style="margin-right: 30px;">新增</el-button>
	    <el-button type="info">重置</el-button>
	  </el-row>
		  
		</el-form>
		<!-- 信息列表展示 -->
		<el-table
		    ref="multipleTable"
		    :data="userinfoes"
		    tooltip-effect="dark"
		    style="width: 100%"
		    @selection-change="handleSelectionChange">
		    <el-table-column
		      type="selection"
		      width="55">
		    </el-table-column>
			<el-table-column
			      type="index"
			      width="50">
			</el-table-column>		    
		    <el-table-column
		      prop="username"
		      label="姓名"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="useraddress"
		      label="地址"
		      show-overflow-tooltip>
		    </el-table-column>
			<el-table-column
			  prop="userage"
			  label="年龄"
			  show-overflow-tooltip>
			</el-table-column>
			<el-table-column
			  prop="usereamail"
			  label="邮箱"
			  show-overflow-tooltip>
			</el-table-column>
			 <el-table-column
			      fixed="right"
			      label="操作"
			      width="100">
			      <template slot-scope="scope">
			        <el-button @click="useredit(scope.row)" type="text" size="small">编辑</el-button>
			        <el-button type="text" size="small" @click="userdelete(scope.row.id)" >删除</el-button>
			      </template>
			    </el-table-column>
		  </el-table>
		  <!-- 新增或编辑的模态框 -->
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="650px"
		  :before-close="handleClose">
		  <!-- 模态框展示信息 -->
			  <el-form  label-width="80px" :model="editUserInfo">
				<el-form-item label="姓名">
				  <el-input v-model="editUserInfo.username"></el-input>
				</el-form-item>
				<el-form-item label="密码">
				  <el-input v-model="editUserInfo.userpwd"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
				  <el-input v-model="editUserInfo.userage"></el-input>
				</el-form-item>
				<el-form-item label="地址">
				  <el-input v-model="editUserInfo.useraddress"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
				  <el-input v-model="editUserInfo.usereamail"></el-input>
				</el-form-item>
			  </el-form>
			  <!-- 模态框展示信息完毕 -->
		  <span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="addOrUpdateUser">确 定</el-button>
		  </span>
		</el-dialog>	
			
			
		<el-dialog
		  title="提示"
		  :visible.sync="messageVisible"
		  width="650px"
		  :before-close="handleClose">
		  <!-- 模态框展示信息 -->
			 您有新的订单！
			  <!-- 模态框展示信息完毕 -->
		  <span slot="footer" class="dialog-footer">
			<el-button @click="messageVisible = false">取 消</el-button>
			<el-button type="primary" @click="flush">确 定</el-button>
		  </span>
		</el-dialog>		
	

	</div>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				userInfo:{
					username:"",
					userage:"",
					useraddress:"",
					usereamail:""
				},
				userinfoes:[],
				dialogVisible:false,
				editUserInfo:{
					id:null,
					username:"",
					userpwd:"",
					userage:"",
					useraddress:"",
					usereamail:""
				},
				titleVisible:false,
				messageVisible:false,
				
				
			},
			methods:{
				onSelect:function(){
					
					var ps=Qs.stringify(this.userBean);
					var that=this;
					axios.post('http://localhost:8086/nsd_websocket1015/queryUserInfo', ps)
					  .then(function (response) {
						  console.log(response);
						  that.userinfoes=response.data;
					  })
					  .catch(function (error) {
					    console.log(error);
					  });					
					
				},
				onAdd:function(){
					this.dialogVisible=true;
					// 当点击新增按钮时，需要清空表单数据
					this.editUserInfo={
						id:null,
						username:"",
						userpwd:"",
						userage:"",
						useraddress:"",
						usereamail:""
				}
					
				},
				handleSelectionChange:function(){
					
				},
				addOrUpdateUser:function(){
					var ps=Qs.stringify(this.editUserInfo);
					var that=this;
					axios.post('http://localhost:8086/nsd_websocket1015/addOrUpdateUser', ps)
					  .then(function (response) {
						  console.log(response);
						  that.dialogVisible=false;
						  that.onSelect();
						  
						  
						  
						  
					  })
					  .catch(function (error) {
					    console.log(error);
					  });					
					
					
					
					
					
					
				},
				flush:function(){
					this.messageVisible=false;
					this.onSelect();
				}
				,
				useredit:function(eidtUserInfoOne){
					this.dialogVisible=true;
					// 提取单条信息映射在表单中；eidtUserInfoOne点击编辑时所传递进来的参数，每行信息
					this.editUserInfo=Object.assign({},eidtUserInfoOne)
				},
				userdelete:function(userid){
					
					        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					          confirmButtonText: '确定',
					          cancelButtonText: '取消',
					          type: 'warning'
					        }).then(() => {
								var ps=Qs.stringify({"id":userid});
								var that=this;
								axios.post('http://localhost:8086/nsd_websocket1015/deleteUserInfoById', ps)
								  .then(function (response) {
									 
									  console.log(response);
									  that.dialogVisible=false;
									  that.onSelect();
									  this.$message({
									    type: 'success',
									    message: '删除成功!'
									  });
							})								  
					         
					        }).catch(() => {
					          this.$message({
					            type: 'info',
					            message: '已取消删除'
					          });          
					        });
					
					
					
					
					
				},
				handleClose:function(done){		
					var that=this;
					        this.$confirm('确认关闭？')
					          .then(_ => {
					            done();
								that.dialogVisible=false;
					          })
					          .catch(_ => {});
					      },
					  
						  
						  
				}
		})
		
		var w=new WebSocket("ws://localhost:8086/nsd_websocket1015/websocket");
		w.onopen=function(){
			console.log("我已建立连接")
		}
		w.onclose=function(){
			console.log("关闭连接");
		}
		w.onerror=function(){
			console.log("发生了一个错误")
		}
		w.onmessage=function(e){			
			console.log("我接收到了发来的消息"+e.data)
			app._data.messageVisible=true;
			
			
		}
		
	</script>
	
	</body>
</html>
